<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
       <p:panel id="panelServicio" >
            <h:panelGrid columns="1" width="100%" >
                <p:panel header="Edición/Creación" styleClass="width=50%;">
                     <p:panelGrid   style="width:100%;border:0px;"   id="panelServicioMod"    >  
                       <p:row>   
                            <p:column   style="width:25%" >
                            <h:outputLabel value="Servicio " />
                            </p:column>
                            <p:column   style="width:25%" >
                                <p:selectOneMenu id="servicioModelo"  value="#{servicioModeloControlador.currentServicioModeloDetalle.servicio.idServicio}">
                                <f:selectItem  itemLabel="Seleccione un servicio" itemValue="#{null}"></f:selectItem>
                                <f:selectItems value="#{servicioModeloControlador.lstServicio}" var="servicio" itemLabel="#{servicio.nombre}" itemValue="#{servicio.idServicio}"></f:selectItems>
                            </p:selectOneMenu></p:column>
                            <p:column   style="width:25%" >
                            <h:outputLabel value="Monto: " />
                            </p:column>
                            <p:column   style="width:25%" >
                                <p:inputText  id="montoServModel"   size="30" value="#{servicioModeloControlador.currentServicioModeloDetalle.monto}"/>
                            </p:column>
                       </p:row> 
                         
                         
                        <p:row>   
                            <p:column colspan="2"  style="width:25%" >
                                <p:commandButton value="Agregar" action="#{servicioModeloControlador.agregarServicioModelo()}"/>
                            </p:column>
                            <p:column colspan="2"  style="width:25%" >
                            <p:commandButton value="Cancelar" />    
                            </p:column>
                       </p:row>   
                          
                     </p:panelGrid>
                    
                </p:panel>
                
                <p:panel header="Listado"  styleClass="width=50%;">
                    <p:dataTable   rendered="true"  id="tablaServicioModelo" var="servicioModel"  rowKey="#{servicioModel.idModeloServicio}" value="#{servicioModeloControlador.lstServicioModeloDetalle}" scrollable="true"  >  
                   
                        <p:column style="width:90px;"  headerText="Servicio" >  
                            <h:outputText  value="#{servicioModel.servicio.nombre}" />  
                    </p:column>  
                        
                        <p:column style="width:75px;"  headerText="Monto" >  
                            <h:outputText  value="#{servicioModel.monto}" />  
                    </p:column>      


                    <p:column  style="width:25px;">  
                        <p:commandButton icon="ui-icon-pencil" action="#{servicioModeloControlador.editarServicioModelo()}"  >
                            <f:setPropertyActionListener value="#{servicioModel}" target="#{servicioModeloControlador.currentServicioModeloDetalle}" />  
                        </p:commandButton>
                    </p:column>  
                    
                   <p:column  style="width:25px;">  
                       <p:commandButton icon="ui-icon-close" action="#{servicioModeloControlador.eliminarActivoModelo()}"  >
                           <f:setPropertyActionListener value="#{servicioModel}" target="#{servicioModeloControlador.currentServicioModeloDetalle}" />  
                        </p:commandButton>
                    </p:column>       
                   
                </p:dataTable>
                    
                </p:panel>  
            </h:panelGrid>
            
        </p:panel>
    
</ui:composition>